<div class="login-tabs position-relative" style="[style]">
	<div class="login-qrlogin-icon position-absolute"
	style="width: 40px;height: 40px;overflow: hidden;z-index: 100;"
	v-if="loginTabs.qrlogin">
		<div class="position-absolute pointer bg-primary" style="width: 40px;height: 60px;transform:rotate(45deg);overflow: hidden;left: -15px; top: -24px; text-align: right; line-height: 60px; padding-right: 5px;"
		@click="loginTabs.nav=loginTabs.nav==='qrlogin'?'username':'qrlogin'">
			<i class="el-icon-full-screen text-white" style="transform: rotate(-45deg);"
			v-if="loginTabs.nav==='username'||loginTabs.nav==='vcode'"></i>
			<i class="el-icon-monitor text-white" style="transform: rotate(-45deg);"
			v-if="loginTabs.nav==='qrlogin'"></i>
		</div>
	</div>
	<div class="login-tabs position-relative py-4 text-center wrap h-100"
	v-if="loginTabs.nav==='qrlogin'">
		<div class="flex1 text-v-center">
			<img v-if="qrloginImgUrl" :src="qrloginImgUrl" alt="" width="60%">
		</div>
		<div class="position-absolute pt-5"
		style="background-color: rgba(0,0,0,.45);left: 0;top: 0;right: 0;bottom: 0;z-index: 100;"
		v-if="loginTabs.scanQrSuccess">
			<div class="text-center pt-5">
				<i class="el-icon-check text-success h1"></i>
			</div>
			<div class="text-center text-white">扫码成功</div>
		</div>
		<div class="text-small text-secondary mt-3">请使用{xycms:web name="name"}APP扫码登录</div>
	  	<div class="flex text-small text-secondary mt-3 flex-v-center">
		    <div class="text-secondary">登录代表你已同意</div>
		  	<div class="pl-2">
		  		<a href="/article/content/user_agreement_web.html" class="el-link el-link--primary" target="_blank">《网页版服务协议》</a>
		    </div>
	    </div>
	</div>
	<el-tabs v-model="loginTabs.nav" 
	class="login-tabs__nav"
	stretch
	v-if="loginTabs.nav!=='qrlogin'"
	@tab-click="getTimeoutCaptcha">
	    <el-tab-pane label="密码登录" name="username">
	    	<el-form @submit.native.prevent="login" :model="loginTabs.form" class="p-3" size="small">
	    	<div class="flex1 wrap h-100">
			  <el-form-item class="input-item flex1">
			    <el-input v-model="loginTabs.form.username"
			    :disabled="loginTabs.btn.loading"
			    autocomplete="off" placeholder="手机号">
			    	<template slot="prepend" class="px-0">
			    		<i class="el-icon-mobile-phone"></i>
			    	</template>
			   	</el-input>
			  </el-form-item>
			  <el-form-item class="input-item flex1">
			    <el-input type="password" v-model="loginTabs.form.password"
			    :disabled="loginTabs.btn.loading"
			    autocomplete="off" placeholder="密码"
			    show-password>
			    	<template slot="prepend" class="px-0">
			    		<i class="el-icon-lock"></i>
			    	</template>
			    </el-input>
			  </el-form-item>
			  	<el-form-item v-if="loginTabs.is_imgcode&&loginTabs.captcha_type==1" class="input-item flex1">
			        <div class="GeeTestCaptcha">
			            <div class="GeeTestCaptchaWait text-secondary">正在加载验证码......</div>
			        </div>
			  	</el-form-item>
			  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==2" class="input-item flex1">
			        <div class="vaptchaContainer">
						<div class="vaptcha-init-main">
						    <div class="vaptcha-init-loading">
						    <a href="/" target="_blank">
						        <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
						    </a>
						    <span class="vaptcha-text">正在加载验证码...</span>
						    </div>
						</div>
					</div>
			  	</el-form-item>
			  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==3" class="input-item flex1">
			  	</el-form-item>
			  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==4" class="input-item flex1">
			  		<el-button 
			  		native-type="button" 
			  		:type="loginTabs.form.tsec?'success':'warning'"
			  		class="rounded-0 w-100 TencentCaptchaEl"
			  		:icon="loginTabs.form.tsec?'el-icon-circle-check':'el-icon-thumb'"
			  		:data-appid="_config.captchatsec"
			  		data-cbfn="vm.TencentCaptchaCallback">
			  			{{loginTabs.form.tsec?'验证成功':'点击验证'}}
			  		</el-button>
			  	</el-form-item>
			  	<el-form-item prop="imgcode" v-else-if="loginTabs.is_imgcode" class="input-item flex1">
					<el-input placeholder="验证码" v-model="loginTabs.form.imgcode" maxlength="6"
					class="border-right-0">
				    	<template slot="append" class="px-0">
				    		<img src="/captcha" onclick="this.src='/captcha?t='+(new Date()).getTime()" height="30" class="captcha pointer">
				    	</template>
					</el-input>
			  	</el-form-item>
			  </div>
			  <div>
			  <el-form-item>
		    	<el-checkbox v-model="loginTabs.form.cache"
		    	:true-label="1"
		    	:false-label="0">七天免登录</el-checkbox>
			  </el-form-item>
			  <el-form-item>
			    	<el-button native-type="submit" type="primary" class="d-block w-100" :disabled="loginTabs.btn.submit || loginTabs.btn.loading" :loading="loginTabs.btn.loading">{{loginTabs.btn.loading?'登录中':'登录'}}</el-button>
			  </el-form-item>
			  <el-form-item class="mb-0">
			  	<div class="flex flex-center">
			  		<div class="flex-1">
			  			<el-link target="_blank" href="/register" :underline="false">免费注册</el-link>
			  		</div>
				    <div class="text-secondary">其他方式登录</div>
					{eq name=":config('qqlogin.status')" value="1"}
				  	<div class="ml-2 pointer">
				  		<a href="/login/qq" target="_blank">
				  			<img src="__TEMPLATE_STATIC__/icon/icon_qq_logo.png" class="other-login-icon">
				  		</a>
				    </div>
					{/eq}
					{eq name=":config('wxlogin.status')" value="1"}
				  	<div class="ml-2 pointer">
				  		<a href="/login/wx" target="_blank">
					  		<img src="__TEMPLATE_STATIC__/icon/icon_wx_logo.png" class="other-login-icon">
					  	</a>
				    </div>
					{/eq}
			    </div>
			  </el-form-item>
			  </div>
			</el-form>
	    </el-tab-pane>
	    <el-tab-pane label="短信登录" name="vcode">
	    	<el-form @submit.native.prevent="login" :model="loginTabs.form" class="p-3" size="small">
	    	<div class="flex1 wrap h-100">
			  <el-form-item class="input-item flex1">
			    <el-input v-model="loginTabs.form.username"
			    :disabled="loginTabs.btn.loading"
			    autocomplete="off" placeholder="手机号">
			    	<template slot="prepend" class="px-0">
			    		<i class="el-icon-mobile-phone"></i>
			    	</template>
			    </el-input>
			  </el-form-item>
			  	<el-form-item v-if="loginTabs.is_imgcode&&loginTabs.captcha_type==1"class="input-item flex1">
			        <div class="GeeTestCaptcha">
			            <div class="GeeTestCaptchaWait text-secondary">正在加载验证码......</div>
			        </div>
			  	</el-form-item>
			  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==2"class="input-item flex1">
			        <div class="vaptchaContainer">
						<div class="vaptcha-init-main">
						    <div class="vaptcha-init-loading">
						    <a href="/" target="_blank">
						        <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
						    </a>
						    <span class="vaptcha-text">正在加载验证码...</span>
						    </div>
						</div>
					</div>
			  	</el-form-item>
			  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==3"class="input-item flex1">
			  	</el-form-item>
			  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==4"class="input-item flex1">
			  		<el-button 
			  		native-type="button" 
			  		:type="loginTabs.form.tsec?'success':'warning'"
			  		class="rounded-0 w-100 TencentCaptchaEl"
			  		icon="el-icon-thumb"
			  		:data-appid="_config.captchatsec"
			  		data-cbfn="vm.TencentCaptchaCallback">
			  			点击验证
			  		</el-button>
			  	</el-form-item>
			  	<el-form-item prop="imgcode" v-else-if="loginTabs.is_imgcode" class="input-item flex1">
					<el-input placeholder="图形验证码" v-model="loginTabs.form.imgcode" maxlength="6"
					class="border-right-0">
				    	<template slot="append" class="px-0">
				    		<img src="/captcha" onclick="this.src='/captcha?t='+(new Date()).getTime()" height="30" class="captcha pointer">
				    	</template>
					</el-input>
			  	</el-form-item>
			  <el-form-item class="input-item flex1">
			    <el-input v-model="loginTabs.form.vcode"
			    :disabled="loginTabs.btn.loading"
			    autocomplete="off" maxlength="6" placeholder="短信验证码">
		    		<el-link slot="append" type="primary" :disabled="loginTabs.btn.getVcode || loginTabs.btn.loading" @click="getVcode">{{loginTabs.btn.getVcodeText}}</el-link>
			    </el-input>
			  </el-form-item>
			  </div>
			  <div>
			  <el-form-item>
		    	<el-checkbox v-model="loginTabs.form.cache"
		    	:true-label="1"
		    	:false-label="0">七天免登录</el-checkbox>
			  </el-form-item>
			  <el-form-item>
		    	<el-button native-type="submit" type="primary" class="d-block w-100" :disabled="loginTabs.btn.submit || loginTabs.btn.loading" :loading="loginTabs.btn.loading">{{loginTabs.btn.loading?'登录中':'登录'}}</el-button>
			  </el-form-item>
			  <el-form-item class="mb-0">
			  	<div class="flex flex-center">
			  		<div class="flex-1">
			  			<el-link target="_blank" href="/register" :underline="false">免费注册</el-link>
			  		</div>
				    <div class="text-secondary">其他方式登录</div>
					{eq name=":config('qqlogin.status')" value="1"}
				  	<div class="ml-2 pointer">
				  		<a href="/login/qq" target="_blank">
				  			<img src="__TEMPLATE_STATIC__/icon/icon_qq_logo.png" class="other-login-icon">
				  		</a>
				    </div>
					{/eq}
					{eq name=":config('wxlogin.status')" value="1"}
				  	<div class="ml-2 pointer">
				  		<a href="/login/wx" target="_blank">
					  		<img src="__TEMPLATE_STATIC__/icon/icon_wx_logo.png" class="other-login-icon">
					  	</a>
				    </div>
					{/eq}
			    </div>
			  </el-form-item>
			  </div>
			</el-form>
	    </el-tab-pane>
	</el-tabs>
</div>